<template>
  <a-scrollbar style="height: 370px; overflow: auto">
    <div class="shoot-video-con">
      <div class="common-text">{{ taskDesc }}</div>

      <div class="mt10">任务基础信息</div>
      <BasicTaskInfo ref="basicTaskInfo" @saveCom="checkCom" @delCom="delCom" type="SHOOT_VIDEO" :price="getPrice()" />
      <div class="required mt10">
        <span>任务需求</span>
        <!-- <span style="color: red; margin-left: 10px">合计服务费 ￥200</span> -->
      </div>
      <a-radio-group style="width: 100%" v-model="dataObj.outOriginalType">
        <div class="product-artwork">
          <div class="left">
            <div class="radio-box">
              <a-radio value="REAL_SHOOT"></a-radio>
            </div>
            <div class="desc">
              <div class="clearfix">
                <span class="fl">实物拍摄出原片</span>
                <span class="fr" style="color: red">服务费 ￥{{ configInfo.amtServiceRealShoot ? configInfo.amtServiceRealShoot : 0 }}/单</span>
              </div>
              <div class="common-text">任务被接单之后，需要将样品送到任务承接方，对方收到样品方可开始任务</div>
            </div>
          </div>
          <div class="right">
            <div class="radio-box">
              <a-radio :disabled="!cadList[0]" value="C4D_RENDER"> </a-radio>
            </div>
            <div class="desc">
              <div class="clearfix">
                <span class="fl">CAD渲染出原片</span>
                <span v-if="props.type == 'add'" class="ml10 highlight cursor fl" @click="props.searchSku()"><icon-sync /></span>
                <span class="fr" style="color: red">服务费 ￥{{ configInfo.amtServiceC4dRender ? configInfo.amtServiceC4dRender : 0 }}/单</span>
              </div>
              <div class="common-text">渲染需要有产品CAD文件，生成产品原图片，用于精修橱窗图</div>
              <div class="common-text">CAD文件从产品上获取，如果没有，请先在产品上上传CAD文件，再来发布任务</div>
              <div class="have-cad" v-if="cadList[0]">
                <a-space style="width: 100%" v-for="item of cadList">
                  <div class="img-box">
                    <img src="@/assets/CAD.png" alt="" />
                  </div>
                  <div>
                    <div>CAD文件</div>
                    <div class="common-text">{{ item.name }}</div>
                  </div>
                </a-space>
              </div>
              <div class="common-text no-cad-text" v-else>
                <div><icon-exclamation-circle-fill style="font-size: 20px" /></div>
                <div class="common-text">该产品没有CAD文件无法选择该项</div>
              </div>
            </div>
          </div>
        </div>
      </a-radio-group>
      <div class="required mt10">选择样片或者上传脚本</div>
      <a-space>
        <a-radio-group v-model="dataObj.shootType">
          <a-radio value="SCRIPT">
            <span class="common-text">上传脚本，摄影师根据你提供的脚本拍摄剪辑视频</span>
          </a-radio>
          <a-radio value="SAMPLE">
            <span class="common-text">选择样片，你指定的任务承接方会给出很多视频样片供选择，根据选好的样品拍摄剪辑相同风格的视频</span>
          </a-radio>
        </a-radio-group>
      </a-space>
      <div class="task-desc" v-if="dataObj.shootType == 'SCRIPT'">
        <a-textarea v-model="dataObj.videoScript" placeholder="在此录入视频脚本" auto-size />
      </div>
      <div>
        <a-radio-group v-model="dataObj.sampleVideo.url" @change="radioHandleChange">
          <div class="sel-template" v-if="dataObj.shootType != 'SCRIPT'">
            <div class="item" v-for="(item, index) in videoList" :key="item.url">
              <div class="top">
                <video :src="item.url" style="width: 180px; height: 100px" width="160" height="160" controls></video>
              </div>
              <div class="bottom">
                <a-radio :value="item.url">样品{{ index + 1 }}</a-radio>
              </div>
            </div>
          </div>
        </a-radio-group>
      </div>
      <div class="task-desc">
        <a-textarea v-model="dataObj.remark" placeholder="需求描述" auto-size />
      </div>
    </div>
  </a-scrollbar>
</template>

<script lang="ts" setup>
  import { ref, reactive, inject, computed, onMounted } from 'vue'
  import { getPlatTaskConfigByTaskType, listTakeCompanysByTaskType } from '@/api/task'
  import BasicTaskInfo from './basicTaskInfo.vue'
  import { Message } from '@arco-design/web-vue'
  import userStore from '@/store/modules/user'
  const props = defineProps(['searchSku', 'type'])
  // 基础信息实体
  const basicTaskInfo = ref<any>(null)
  const dataObj: any = reactive({
    remark: '',
    outOriginalType: 'REAL_SHOOT',
    shootType: 'SCRIPT',
    sampleVideo: {
      id: '',
      url: '',
    },
    videoScript: '',
  })

  let configInfo: any = ref({})
  let taskDesc = ref('')
  let videoConfigInfo: any = ref({})
  let userInfo = userStore()
  let videoList: any = ref([])
  let comList: any = ref([])

  const radioHandleChange: any = (url: string) => {
    let item = videoList.value.find((e: any) => e.url == url)
    if (item) {
      dataObj.sampleVideo.url = item.url
    }
  }

  const skuInfo: any = inject('skuInfo')
  let cadList = computed(() => {
    let arr = skuInfo.value?.productSpu?.productInfoList || []
    if (props.type == 'add') {
      return arr.filter((e: any) => e.type == 'CAD')
    } else {
      return skuInfo.value.cadList || []
    }
  })

  const getOrSetInfo = (info?: any) => {
    if (!info) {
      let item = basicTaskInfo.value.getOrSetForm()
      // 校验基础信息必填项
      if (!item) return
      // 校验视频拍摄任务的必填项
      if (dataObj.shootType == 'SAMPLE') {
        if (!dataObj.sampleVideo.url) {
          Message.error('请选择样片')
          return false
        }
      } else {
        if (!dataObj.videoScript) {
          Message.error('请录入视频脚本')
          return false
        }
      }

      dataObj.amtOriginalVideoService = dataObj.outOriginalType == 'REAL_SHOOT' ? configInfo.value?.amtServiceRealShoot || 0 : configInfo.value?.amtServiceC4dRender || 0

      let obj = {
        ...item,
        amtCost: dataObj.outOriginalType == 'REAL_SHOOT' ? configInfo.value?.amtServiceRealShoot || 0 : configInfo.value?.amtServiceC4dRender || 0,
        shootViedoTask: dataObj,
      }
      return obj
    } else {
      dataObj.remark = info.shootViedoTask.remark
      dataObj.shootType = info.shootViedoTask.shootType
      dataObj.sampleVideo = info.shootViedoTask.sampleVideo
      dataObj.videoScript = info.shootViedoTask.videoScript
      dataObj.outOriginalType = info.shootViedoTask.outOriginalType
      basicTaskInfo.value.getOrSetForm(info)
      getCompanyList(info)
    }
  }

  // 获取平台端配置
  const getComConfig = async () => {
    const res: any = await getPlatTaskConfigByTaskType({ taskType: 'SHOOT_VIDEO' })
    let amtService: any = res?.data?.amtService || {}
    configInfo.value = amtService
    videoConfigInfo.value = res?.data || {}
    taskDesc.value = res?.data?.taskDesc || ''
    if (props.type == 'add') videoList.value = res?.data?.sampleVideoList || []
  }

  const checkCom = (info: any) => {
    let arr = info.taskConfig?.sampleVideoList || []
    if (arr.length > 0) {
      videoList.value = arr
      dataObj.sampleVideo.url = ''
    }
  }

  const getPrice = () => {
    let num = 0
    if (dataObj.outOriginalType == 'REAL_SHOOT') {
      num = configInfo.value?.amtServiceRealShoot || 0
    } else {
      num = configInfo.value?.amtServiceC4dRender || 0
    }
    return num
  }

  const getCompanyList = async (info: any) => {
    const res: any = await listTakeCompanysByTaskType({ taskType: 'SHOOT_VIDEO', companyId: userInfo.companyId })
    comList.value = res?.data || []

    if (info.takeCompany && info.takeCompany.id) {
      let item = comList.value.find((e: any) => e.companyId == info.takeCompany.id)
      if (item) {
        let arr = item.taskConfig?.sampleVideoList || []
        if (arr.length > 0) {
          videoList.value = arr
        }
      }
    } else {
      videoList.value = videoConfigInfo.value.sampleVideoList || []
    }
  }

  const delCom = () => {
    videoList.value = videoConfigInfo.value.sampleVideoList || []
  }

  onMounted(() => {
    getComConfig()
  })

  defineExpose({ getOrSetInfo, getPrice })
</script>

<style lang="less" scoped>
  :deep(.arco-textarea-wrapper) {
    border: none !important;
  }

  .common-text {
    font-size: 12px;
    color: #a39999;
  }

  .shoot-video-con {
    padding: 5px 0;
    box-sizing: border-box;
    .product-artwork {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        width: 49%;
        border: 1px solid #d7d7d7;
        padding: 5px;
      }
      .right {
        display: flex;
        width: 49%;
        // height: 60px;
        border: 1px solid #d7d7d7;
        padding: 5px;
      }
      .radio-box {
        width: 26px;
        text-align: center;
      }
      .desc {
        flex: 1;
      }
      .have-cad {
        .img-box {
          width: 40px;
          height: 40px;
        }
      }
      .no-cad-text {
        margin: 5px 0;
        text-align: center;
      }
    }
  }

  .task-desc {
    width: 100%;
    min-height: 100px;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    margin-top: 20px;
    padding: 5px;
  }

  .sel-template {
    width: 100%;
    min-height: 100px;
    // border: 1px solid #d7d7d7;
    border-radius: 5px;
    margin-top: 20px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 180px;
      height: 140px;
      margin-right: 10px;
      .top {
        width: 180px;
        height: 100px;
      }
    }
  }
</style>
